import { useEffect, useRef, useState } from 'react';
import Editor from 'for-editor';
import { upload } from '@/utils/tools/file';
import { notification } from 'antd';
import { Host } from '@/app';
import { NORMAL_CODE } from '@/constants';

const Markdown: React.FC = (props) => {
  const [value, setValue] = useState(props.value);
  //表格dom
  const actionRef = useRef();
  useEffect(() => {
    const asyncFn = async () => {};
    asyncFn();
  }, []);

  const onChange = (value) => {
    setValue(value);
    props.onChange(value);
  };

  const addImg = async (file) => {
    const res = await upload({
      data: {},
      file: file,
      filename: 'file',
      onProgress: Function.prototype,
    });
    if (res.code !== NORMAL_CODE) {
      return notification['error']({
        message: '上传失败',
        description: res.msg,
      });
    }
    const url = API_URL + '/admin/file/echo?id=' + res.data.id;
    notification.info({
      message: '资源地址',
      description: url,
      placement: 'top',
    });
    // actionRef.current.$img2Url(res.data.name, url);
  };

  return (
    <Editor
      ref={actionRef}
      value={value}
      addImg={(file) => addImg(file)}
      onChange={(value) => onChange(value)}
      style={{ height: 200 }}
      subfield={true}
    />
  );
};

export default Markdown;
